<script>
export default {
  name: "lifeCycle",
//   生命周期
  data(){
    return{
      msg:"hello",
      value:''
    }
  },
  // 创建之前，data和methods中的数据还没有初始化，获取不到data和methods中的数据
  // 作用：页面重定向
  beforeCreate(){
    console.log('beforeCreate')
    console.log(this.msg)
  },
//   创建之后，data和methods中的数据已经初始化，第一个可以操作data和methods的生命周期
//   作用：数据初始化，接口请求
created(){
  console.log('created')
  console.log(this.mgs)
},
  // 创建之前，虚拟DOM挂载
  beforeMount(){
    console.log('beforeMount')
    console.log(this.msg)
  },
  // 创建之后，真实的DOM挂载，第一个可以操作DOM元素的生命周期
  mounted(){
    console.log('mounted')
    console.log(this.msg)
  },
  // 执行0次或者无数次
  // 更新之前，data中的数据是最新的，页面中的数据是旧的，还未保持同步
  beforeUpdate(){
    console.log('beforeUpdate')
    console.log(this.msg)
  },
  // 更新之后，data和页面中的数据都是最新的
  updated(){
    console.log('updated')
    console.log(this.msg)
  },
  // 销毁之前 页面还未销毁
  // 作用：清空定时器和页面监听
  beforeDestroy(){
    console.log('beforeDestroy')
    console.log(this.msg)
  },
  // 销毁之后
  destroyed(){
    console.log('destroyed')
    console.log(this.msg)
  }
}
</script>

<template>
<!--
生命周期：从Vue实例创建、运行到销毁期间，总是伴随着各种事件，这些事件统称为生命周期
-->
<div>lifeCycle
{{msg}}
  <input type="text" v-model="value">
  <router-link to="/about">about</router-link>
</div>
</template>

<style scoped lang="less">

</style>